<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>输入框上下选择</title>
	</head>
	<style>
		.login{
			width: 400px;
			height: 400px;
			position: absolute; /* 绝对定位，相对于父容器定位 */
			top: 50%; /* 相对于父容器顶部垂直居中 */
			left: 50%; /* 相对于父容器左侧水平居中 */
			transform: translate(-50%, -50%); /* 移动自身尺寸的一半，实现完全居中效果 */
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
			border-radius:4px;
		    display: flex;
			justify-content: center; /* 水平居中 */
			align-items: center; /* 垂直居中 */
		}
		.input{
			margin: 10px;
		}
		.input label{
			color: #606266;
			padding: 10px;
		}
		.input input{
			width: 200px;
			line-height: 15px;
			outline: #2d8cf0;
			padding: 10px;
			border: 1px solid #2d8cf0;
			border-radius: 4px;
			color:  #606266;
		}
		.input input:focus{
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); 
			border: 1px solid #F56C6C;
		}
	</style>
	<body>
		<div class="login">
			<div>
				<div class="input">
					<label>姓名:</label>
					<input placeholder="请输入姓名">
				</div>
				<div class="input">
					<label>账号:</label>
					<input placeholder="请输入账号"/>
				</div>
			</div>
		</div>
		<script>
			let inputList=document.querySelectorAll('input')
			// 初始化当前选中的索引
			let currentIndex = 0;
			document.addEventListener('keydown',(event)=>{
				console.log(event.keyCode)
				 if (event.keyCode === 38) { // 上箭头
				    currentIndex = (currentIndex - 1 + inputList.length) % inputList.length;
					// 切换到对应的输入框
					inputList[currentIndex].focus();
				  } else if (event.keyCode === 40) { // 下箭头
				    currentIndex = (currentIndex + 1) % inputList.length;
					// 切换到对应的输入框
					inputList[currentIndex].focus();
				  }
				 
			})
		
		</script>
	</body>
</html>